<template>
  <div class="hello">
    <h1>时间转换器</h1>
    <a-range-picker
      :show-time="{ format: 'HH:mm' }"
      format="YYYY/MM/DD HH:mm:ss"
      :placeholder="['上班时间', '下班时间']"
      :disabled-date="disabledDate"
      @change="onRangeChange"
      @ok="onRangeOk"
      :inputReadOnly="true"
    />
    <p>工作时间为：{{ time }}</p>
  </div>
</template>

<script>
  import { defineComponent,ref } from 'vue';
  import dayjs from 'dayjs';
export default defineComponent({
  setup() {
    const disabledDate = (current) => {
      // Can not select days before today and today
      return  current > dayjs().endOf('day');
    };
    const time = ref('')
    const onRangeChange = (value, dateString) => {
      console.log('上班时间1: ', value);
      console.log('上班时间2', dateString);
      let time1 = dateString[0];
      let time2 = dateString[1];
      let toWorkT = new Date(time1);  // replace方法将 - 转为 /
      let goWorkT = new Date(time2);  // replace方法将 - 转为 /
      let timeDiff = goWorkT.getTime() - toWorkT.getTime();  // 时间差的毫秒数
      // timeDiff = 时间戳差值
      console.log(toWorkT,goWorkT);
      let days = Math.floor(timeDiff / (24 * 3600 * 1000))||0; // 计算出天数
      let leavel1 = timeDiff % (24 * 3600 * 1000)||0 // 计算去除天数后剩余的毫秒数
      let hours = Math.floor(leavel1 / (3600 * 1000))||0; // 计算天数后剩余的小时数
      let leavel2 = timeDiff % (3600 * 1000)||0; // 计算剩余小时后剩余的毫秒数
      let minutes = Math.floor(leavel2 / (60 * 1000))||0; // 计算剩余的分钟数
      
      console.log(`${days}天${hours}时${minutes}分`)
      time.value=`${days}天${hours}时${minutes}分`
    };

    const onRangeOk = (value) => {
      console.log('onOk: ', value);
    };

    return {
      onRangeChange,onRangeOk,time,disabledDate
    };
  },
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.hello{
  width: 80vw;
}
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
